<template>
	<view class="container">
		<view class="hint">
			<text>请拍摄并上传您的身份证照片</text>
		</view>

		<view class="uploadBox">
			<view style="width: 70%;">
				<view v-if="!src" class="uploadItem">
					<view class="imgBox">
						<view class="leftTop"></view>
						<view class="leftTop2"></view>
						<view class="leftbottom"></view>
						<view class="leftbottom2"></view>
						<view class="rightTop"></view>
						<view class="rightTop2"></view>
						<view class="rightbottom"></view>
						<view class="rightbottom2"></view>
					</view>
				</view>
				<image v-if="src" class="imgUrl" :src="src" mode="widthFix"/>
				<view @click="changImg()" class="leftBtn">拍摄正面</view>
			</view>
		</view>

		<view v-for="(item, index) in prism_rowsInfo" :key="index">
			{{ item.word }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "",
				prism_rowsInfo: []
			}
		},
		methods: {
			changImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ["camera", "album"], //拍照或相册
					success: (res) => {
						// console.log(res);
						this.src = res.tempFilePaths[0]
						res.tempFiles.forEach((item, index) => {
							this.urlTobase64(res.tempFilePaths[index], item);
						});
					}
				})
			},
			// 图片转base64并调用阿里图片识别接口
			urlTobase64(url, item) {
				const self = this
				var itemname = item.name.split(".")[0];
				var itemtype = item.name.split(".")[1];
				var base64 = "";
				uni.request({
					url: url,
			 	method: "GET",
					responseType: "arraybuffer",
					success: (res) => {
						base64 = uni.arrayBufferToBase64(res.data); // 把arraybuffer转成base64
						// base64 = "data:image/jpeg;base64," + base64 // 不加上这串字符，在页面无法显示
						var img = {
							name: itemname,
							size: item.size,
							type: itemtype,
							content: base64,
							url: url,
							new: true,
							state: -1,
						};
						var json = {
							//图像数据：base64编码，要求base64编码后大小不超过4M，最短边至少15px，最长边最大4096px，支持jpg/png/bmp格式，和url参数只能同时存在一个
							"img": img.content,
							//图像url地址：图片完整URL，URL长度不超过1024字节，URL对应的图片base64编码后大小不超过4M，最短边至少15px，最长边最大4096px，支持jpg/png/bmp格式，和img参数只能同时存在一个
							// "url": img,
							//是否需要识别结果中每一行的置信度，默认不需要。 true：需要 false：不需要
							"prob": true,
							//是否需要单字识别功能，默认不需要。 true：需要 false：不需要
							"charInfo": true,
							//是否需要自动旋转功能，默认不需要。 true：需要 false：不需要
							"rotate": true,
							//是否需要表格识别功能，默认不需要。 true：需要 false：不需要
							"table": true,
							//字块返回顺序，false表示从左往右，从上到下的顺序，true表示从上到下，从左往右的顺序，默认false
							"sortPage": true,
							//是否需要去除印章功能，默认不需要。true：需要 false：不需要
							"noStamp": true,
						 //是否需要图案检测功能，默认不需要。true：需要 false：不需要
							"figure": true,
							//是否需要成行返回功能，默认不需要。true：需要 false：不需要
							"row": true,
							//是否需要分段功能，默认不需要。true：需要 false：不需要
							"paragraph": true
						}
						uni.request({
							url: '', //测试api
							dataType: 'json',
							header: {
								'Authorization': '' // AppCode
							},
							method: 'POST',
							data: JSON.stringify(json),
							success(res) {
								console.log(res);
								if (res.data.prism_rowsInfo.length  === 6) {
									// 有可能是身份证，还得判断
									self.prism_rowsInfo = res.data.prism_rowsInfo
								} else {
									// 其他
								}
							}
						})
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	padding: 20rpx;
}
.uploadBox {
	padding: 15rpx 20rpx 40rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
}
.uploadItem {
	width: 100%;
	height: 320rpx;
	background-color: #f1f7ff;
	border-radius: 15rpx;
	padding: 30rpx;
	position: relative;
}
.imgBox {
	width: 100%;
	height: 100%;
	position: relative;
}
.leftTop {
	height: 28rpx;
	width: 4rpx;
	background-color: #007aec;
	position: absolute;
	left: 0;
}

.leftTop2 {
	height: 4rpx;
	width: 28rpx;
	background-color: #007aec;
	position: absolute;
	top: 0;
}

.leftbottom {
	height: 28rpx;
	width: 4rpx;
	background-color: #007aec;
	position: absolute;
	bottom: 0;
}

.leftbottom2 {
	height: 4rpx;
	width: 28rpx;
	background-color: #007aec;
	position: absolute;
	bottom: 0;
}

.rightTop {
	height: 28rpx;
	width: 4rpx;
	background-color: #007aec;
	position: absolute;
	right: 0;
}

.rightTop2 {
	height: 4rpx;
	width: 28rpx;
	background-color: #007aec;
	position: absolute;
	right: 0;
	top: 0;
}

.rightbottom {
	height: 28rpx;
	width: 4rpx;
	background-color: #007aec;
	position: absolute;
	right: 0;
	bottom: 0;
}

.rightbottom2 {
	height: 4rpx;
	width: 28rpx;
	background-color: #007aec;
	position: absolute;
	right: 0;
	bottom: 0;
}
.imgUrl {
	width: 100%;
	height: 320rpx;
}
.leftBtn {
	width: 100%;
	height: 75rpx;
	line-height: 75rpx;
	background-color: #007aec;
	border-radius: 0 0 12rpx 12rpx;
	text-align: center;
	color: #fff;
}
</style>
